<template>
  <div>
    <el-button type="primary" @click="handleLink">新建文章</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="ID" width="100" />
      <el-table-column prop="category.name" label="栏目" width="150" />
      <el-table-column prop="title" label="标题" width="360" />
      <el-table-column prop="date" label="发布时间" width="200" />
      <el-table-column prop="sorting" label="排序" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
                        <el-switch
                        :active-value = "'1'"
                        :inactive-value = "'0'" 
                        
                        v-model="scope.row.status"
                          :before-change="beforeChange"
                          @change="changeSwitchStatus(scope.row)"
                        />
                      </template>
      </el-table-column>
      <el-table-column prop="istop" label="置顶" width="120">
        <template #default="scope">
                        <el-switch
                        :active-value = "'1'"
                        :inactive-value = "'0'" 
                        
                        v-model="scope.row.istop"
                          :before-change="beforeChange"
                          @change="changeSwitchStatus(scope.row)"
                        />
                      </template>
      </el-table-column>

      <el-table-column prop="isrecommend" label="推荐" width="120">
        <template #default="scope">
                        <el-switch
                        :active-value = "'1'"
                        :inactive-value = "'0'" 
                        
                        v-model="scope.row.isrecommend"
                          :before-change="beforeChange"
                          @change="changeSwitchStatus(scope.row)"
                        />
                      </template>
      </el-table-column>
      <el-table-column prop="visits" label="访问量" width="120" />

      <el-table-column fixed="right" label="操作" width="120">
        <template  #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)"
            >删除</el-button
          >
          <el-button link type="primary" size="small" @click="editContent(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()

import { column } from "element-plus/es/components/table-v2/src/common"
import { ref,onMounted  } from "vue"
// import { divingcontent,divingUpdateContent,divingDeleteContent } from "@/api/contents/diving"
import { divingcontent,divingUpdateContent,divingDeleteContent } from '@/api/contents/diving'
import { ElMessage } from 'element-plus'
// const status = ref(true)
// const istop = ref(true)
// const isrecommend = ref(true)
const tableData = ref([])
const tableRow = ref({})


const handleLink = () => {
    var params = {id : 1}
    router.push({ name: "divingcontentdetail",params })
  }
const handleClick = (row ) => {
  console.log('click',row)
  var result = DeleteContent({"id":row.id})
  result.then(response =>{
    if(response.code == 0){
      ElMessage.success(response.msg)
      getList()
    } else {
      ElMessage.error(response.msg)
    }
  })
}

const editContent = (row) => {
    var params = {"id":row.id}
    console.log(row)
    // router.push({ name: "divingcontentdetail","params":params });
    // router.push({ path:"/layout/contents/divingcontentdetail",params });
    
    router.push({ name: "divingcontentdetail",params ,state:{id: row.id} })
}

const UpdateContent = async(data) => {
  const result = await divingUpdateContent(data)
  if(result.code == 0){
      ElMessage.success(result.msg)
    } else {
      ElMessage.error(result.msg)
    }
}

const DeleteContent = async(params) => {
  const result = divingDeleteContent(params)
  return result
}

const beforeChange = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.success("请稍候");
      return resolve(true);
    }, 1000);
  });
};

const getList = async() => {
  const { data } = await divingcontent()
  tableData.value = data

  // var temp = new Array({'id':0,'name':'顶级栏目',children: []})
  // for(var i = 0 ; i < data.length; ++i){
  //   temp.push(data[i]);
  // }
}
onMounted(() => {
  getList()
})



const changeSwitchStatus = (row) =>{
  if(row.status !== '' || row.isrecommend !== '' || row.istop !== ''){  
    // console.log('rowrwo',row)
    UpdateContent(row)
  }
  // console.log("result",result)
  // console.log("rowstatus", row.status);
  // console.log("row",row);
}

</script>
<style lang="scss">

</style>